import React, { useState } from 'react'
import { Picker, Field, Search, Toast, Swiper, Image, Grid, Cell, Tag, ProductCard, Button } from 'react-vant'
import { ShopO, LikeO, StarO, PhoneO, SettingO, FireO, CouponO, CartO, FriendsO, CommentO, GiftO, ServiceO, TodoListO } from '@react-vant/icons'
import { NavLink, Outlet } from 'react-router-dom'
import { images } from '../../../img/images'
import './homes.css'

type Props = {}

// 首页下拉菜单
const columns = [
  '长春',
  '南京',
  '苏州',
  '常州',
  '淮安',
  '扬州',
  '南通',
  '宿迁',
  '泰州',
  '无锡',
]

function index({ }: Props) {
  // 下拉菜单默认
  const [value, setValue] = useState('长春')
  // 搜索
  const [value1, setValue1] = useState('');
  // 宫格数据
  const gong = [
    '买房', '租房', '求组', '求购', '地图找房', '咨询', '楼市圈', '经纪人', '团购看房', '直播看房',
  ]
  // 宫格icon图标
  const gongicon = [
    { ic: < LikeO /> }, { ic: <StarO /> }, { ic: < PhoneO /> }, { ic: < SettingO /> }, { ic: < FireO /> },
    { ic: < CouponO /> }, { ic: < CartO /> }, { ic: < FriendsO /> }, { ic: <CommentO /> }, { ic: < GiftO /> },
    { ic: < ServiceO /> }, { ic: < TodoListO /> }
  ]
  // 楼市资讯
  const lou = [
    '心悦上城新房正在抢购心悦上城新房正在抢购！！',
    '心悦上城新房正在抢购心悦上城新房正在抢购！！',
    '心悦上城新房正在抢购心悦上城新房正在抢购！！',
    '心悦上城新房正在抢购心悦上城新房正在抢购！！',
    '心悦上城新房正在抢购心悦上城新房正在抢购！！',
  ]

  return (
    <div className='shou_box'>

      <header>
        <div className='head_top'>
          <h2>宏烨找房</h2>
        </div>
        <div className='head_bottom'>
          {/* 下拉菜单 */}
          <div className='la'>
            <Picker
              popup={{
                round: true,
              }}

              value={value}
              title='标题'
              columns={columns}
              onConfirm={setValue}
            >
              {(val: any, _, actions) => {
                return (
                  <Field
                    readOnly
                    clickable
                    label='选择'
                    value={val || ''}
                    placeholder='请选择城市'
                    onClick={() => actions.open()}
                  />
                )
              }}
            </Picker>
          </div>

          {/* 搜索 */}
          <div className='sou'>
            <Search
              value={value1}
              onChange={setValue1}
              placeholder="请输入搜索关键词"
              showAction
              style={{ height: "44px" }}
              onSearch={(val1) => {
                Toast(val1);
                setValue1(val1);
              }}
              onCancel={() => {
                Toast('取消');
                setValue1('');
              }}
              onClear={() => {
                Toast('清除');
                setValue1('');
              }}
              onClickInput={() => {
                // Toast('点击输入区域时触发	');
              }}
            />
          </div>

        </div>
      </header>

      <main>
        {/* 轮播图 */}
        <div className='tu'>
          <Swiper>
            {images.map((image) => (
              <Swiper.Item key={image}>
                <Image lazyload src={image} className='tu'/>
              </Swiper.Item>
            ))}
          </Swiper>
        </div>

        {/* 宫格 */}
        <Grid columnNum={5}>
          {Array.from({ length: 10 }, (_, i) => (
            <Grid.Item key={i} icon={gongicon[i].ic} text={gong[i]} />
          ))}
        </Grid>

        {/* 楼市资讯 */}
        <div className='ls_h'>
          <h2>楼市资讯
            <span>更多</span>
          </h2>
        </div>
        {/* 楼市资讯内容 */}
        <div className='lszx'>
          <ul className='zx'>
            {
              lou.map((item, index) => {
                return <li key={index}>
                  <Tag type="primary" style={{ margin: '10px 10px' }}>Top{index + 1}</Tag>
                  {item}
                </li>
              })

            }
          </ul>
        </div>

        {/* 热门楼盘 */}
        <div className='lp_h'>
          <h2>热门楼盘
            <span>更多</span>
          </h2>
        </div>
        {/* 热门楼盘内容 */}
        <div>
          <ProductCard
            title="商品名称"
            desc="描述信息"
            
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          />
        </div>

      </main>

    </div>
  )
}

export default index